<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="$t('info')"
      width="80% "
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :disabled="operation === 0"
      >
        <el-descriptions
          class="margin-top"
          :title="$t('BasicInformation')"
          :column="3"
          border
          style="width: 700px; padding-left: 30px; margin: 0 auto"
        >
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.warehouseOutDocNo") }}
            </template>
            <!-- {{ detailDataForm.orderNo }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.orderType") }}
            </template>
            <!-- {{ detailDataForm.orderNo }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.rigDocNo") }}
            </template>
            {{}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("materialsLang.packageMaterial") }}
            </template>
            <!-- {{ detailDataForm. }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.providerNo") }}
            </template>
            <!-- {{ detailDataForm. }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.logisticsProducts") }}
            </template>
            <!-- {{ detailDataForm. }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.weight") }}
            </template>
            {{ detailDataForm.weight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.countryOfDestination") }}
            </template>
            <!-- {{ detailDataForm. }} -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.size") }}
            </template>
            {{ detailDataForm.size }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.providerChannel") }}
            </template>
            {{ detailDataForm.providerChannel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.volumeWeight") }}
            </template>
            {{ detailDataForm.volumeWeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.provider") }}
            </template>
            {{ detailDataForm.providerName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.billingWeight") }}
            </template>
            {{ detailDataForm.billingWeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.bubbleCoefficient") }}
            </template>
            {{ detailDataForm.bubbleCoefficient }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.customerName") }}
            </template>
            {{ detailDataForm.customerCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.channelOwner") }}
            </template>
            {{ detailDataForm.channelOwner }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.managerPerson") }}
            </template>
            {{ detailDataForm.managerPerson }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.customerService')"
          >
            {{}}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          :title="$t('outboundOrderLang.recipientInformation')"
          :column="3"
          border
          style="width: 700px; padding-left: 30px; margin: 0 auto"
        >
          <el-descriptions-item :label="$t('outboundOrderLang.recipient')">
            {{ detailDataForm.recipient }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipientSPhone')"
          >
            {{ detailDataForm.contactsPhone }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipientSMobilePhone')"
          >
            {{ detailDataForm.contactsPhone }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="
              $t('outboundOrderLang.recipient') + $t('depotLang.postCode')
            "
          >
            {{ detailDataForm.postCode }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipient') + $t('depotLang.country')"
          >
            {{ detailDataForm.country }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="
              $t('outboundOrderLang.recipient') + $t('depotLang.provinceStates')
            "
          >
            {{ detailDataForm.provinceStates }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipient') + $t('depotLang.city')"
          >
            {{ detailDataForm.city }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipient') + $t('depotLang.address')"
          >
            {{ detailDataForm.country }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <h3>其他信息</h3>
      <div>
        <el-tabs type="border-card">
          <!-- 订单产品 -->
          <el-tab-pane :label="$t('outboundOrderLang.orderProducts')">
            <el-table :data="orderProductsData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.goodsName')"
                prop="goodsName"
                align="center"
                min-width="150"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('goodsSKULang.customCode')"
                prop="customCode"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('goodsSKULang.declaredPrice')"
                prop="declaredPrice"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('number')"
                prop="number"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('unitLang.weight') + '(KG)'"
                prop="weight"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('unitLang.volume') + '(CM)'"
                prop="volume"
                align="center"
                min-width="80"
              />
            </el-table>
          </el-tab-pane>
          <!-- 操作记录 -->
          <el-tab-pane :label="$t('outboundOrderLang.operationRecord')">
            <el-table :data="operationRecord" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('harvestLang.operationNode')"
                prop="operationNode"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('operationDate')"
                prop="skuName"
                align="center"
                min-width="150"
              />
            </el-table>
          </el-tab-pane>
          <!-- 订单日志-->
          <el-tab-pane :label="$t('outboundOrderLang.orderLog')">
            <el-table :data="orderLogData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.dateInfo')"
                prop="skuName"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('outboundOrderLang.statusBeforeModification')"
                prop="statusBeforeModification"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('outboundOrderLang.statusAfterModification')"
                prop="statusAfterModification"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('harvestLang.modification')"
                prop="modification"
                align="center"
                min-width="300"
              />
              <el-table-column
                :label="$t('harvestLang.modifiedRemarks')"
                prop="remarks"
                align="center"
                min-width="200"
              />
            </el-table>
          </el-tab-pane>
          <!-- 订单API日志 -->
          <el-tab-pane :label="$t('outboundOrderLang.orderApiLog')">
            <el-table :data="orderApiLogData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('warehouseEntryLang.provider')"
                prop="logisticsProvider"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('harvestLang.providerChannel')"
                prop="providerChannel"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('statusLang.status')"
                prop="status"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('outboundOrderLang.failureReason')"
                prop="failureReason"
                align="center"
                min-width="150"
              />
              <el-table-column
                :label="$t('outboundOrderLang.pusher')"
                prop="pusher"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('pushDate')"
                prop="pushDate"
                align="center"
                min-width="120"
              />
            </el-table>
          </el-tab-pane>
          <!-- TODO -->
          <!-- 计费日志 -->
          <el-tab-pane :label="$t('outboundOrderLang.billingLog')">
            <el-table
              :data="billingLogData"
              :span-method="arraySpanMethod"
              border
              class="mt-10"
            >
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('outboundOrderLang.billingNode')"
                prop="billingNode"
                align="center"
                min-width="120"
              />
              <el-table-column
                :label="$t('billingDate')"
                prop="billingDate"
                align="center"
                min-width="150"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deliveryStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { getOrderInfo } from '@/api/WMS-order/warehouseEntry'
import {
  getDeliveredOrderBoxList,
  getDeliveredOrderBoxSkuList,
  getDeliveredOrderSkuList
} from '@/api/business/warehouseManage/harvest'
export default {
  name: 'InfoForm',
  props: {
    value: {
      type: Number,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看
    }
  },
  data() {
    return {
      detailDataForm: {},
      orderProductsData: [], // 订单产品
      operationRecord: [], // 操作记录
      orderLogData: [], // 订单日志
      orderApiLogData: [], // 订单API日志
      billingLogData: [], // 计费日志
      getTitleByValue: getTitleByValue,
      deliveryStatusDict: deliveryStatusDict,
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict) // 状态下拉
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
          this.getDeliveredOrderBoxList()
          this.getDeliveredOrderBoxSkuList()
          this.getDeliveredOrderSkuList()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
    },
    // 基础信息
    async getData() {
      if (!this.value) return
      const res = await getOrderInfo({
        orderId: this.value
      })
      if (!res || res.data === null) return
      this.detailDataForm = res.data
      console.log(res.data, '回显')
    },
    // 装箱清单详情
    async getDeliveredOrderBoxList() {
      const { data } = await getDeliveredOrderBoxList({
        orderId: this.value
      })
      console.log(data, '装箱清单')
      this.packingListData = data.boxPageDTOList
    },
    // 入库单箱明细
    async getDeliveredOrderBoxSkuList() {
      const { data } = await getDeliveredOrderBoxSkuList({
        orderId: this.value
      })
      console.log(data, '入库单箱明细')
      this.boxDetailData = data.boxSkuDTOList
    },
    // 入库单产品明细
    async getDeliveredOrderSkuList() {
      const { data } = await getDeliveredOrderSkuList({
        orderId: this.value
      })
      console.log(data, '入库单产品明细')
      this.productsDetailData = data.boxSkuDTOList
    },
    reset() {
      this.query
    },
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}
</script>

<style scoped>
::v-deep .el-descriptions__header {
  margin-top: 20px;
}
</style>
